<template>
  <el-upload
    class="avatar-uploader"
    action=""
    :show-file-list="false"
    :before-upload="beforeAvatarUpload"
    :http-request="onUploadImage"
  >
    <!-- :http-request覆盖action的上传 -->
    <img v-if="value" :src="value" class="avatar">
    <i v-else class="el-icon-plus avatar-uploader-icon" />
  </el-upload>
</template>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
<!-- 1.创建腾讯云的文件服务器
    1.创建桶
    2.解决桶的跨域问题 *,put、get、post
    3.创建密钥，保存 SecretKey和SecretId
    4.创建好保存：SecretId、SecretKey、存储桶名称、所属区域
 -->

<!-- 2.上传到腾讯云的桶里 --- 小文件上传小于5MB
    1.点击到桶的基本使用
    2.下载依赖npm i cos-js-sdk-v5 --save
    3.引入依赖import COS from 'cos-js-sdk-v5';
    4.在上传的element-ui组件使用http-request属性,只是一个方法,参数是上传的得数据,当用户上传时替换action
    5.在http-request方法中,创建COS实例,实例中对象放SecretKey,SecretId数据
    6.调用cos.putObject方法,里面参数是 {
        Bucket: 'hm-rz-94-1324721122', // 桶名
        Region: 'ap-guangzhou', // 桶的所属区域
        Key: e.file.name, // 文件名，可以用参数的.file.name
        StorageClass: 'STANDARD', // 固定使用不修改
        Body: e.file // 文件信息，在参数.file
      }，
    7.方法中还有一个回调函数，里面有两个参数（err，data） err是上传不成功，data是上传成功
 -->
<!-- 3.大文件上传，断点续传，uploadFile（），免费只有50兆，
1.注释:before-upload的限制大小直接return true
2.将putObject改为uploadFile，官网有示例代码，直接复制修改SDK-javaScript
 -->

 <!-- 4.将用户上传的文件传递给父组件
1.在父组件v-model绑定上传组件的字段
2.在子组件props接收传递过来的图片url
3.组件的判断条件及src属性就是她
4.判断用户上传的图片个式及大小，创建一个格式数组判断上传的文件是不是数组包含的
5.在上传成功的回调里面$emit(http:// + data.Location)桶里面的路径  传送给父组件，手动拼接路径
6.父组件按确定，上传到对应的接口
  -->
<script>
// 上传到全家桶
import COS from 'cos-js-sdk-v5'
export default {
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  methods: {
    // 上传文件
    onUploadImage(e) {
      console.log('e  --->', e) // 参数里面有上传数据的文件信息
      const cos = new COS({
        SecretId: 'AKIDqU8nHVZdjfLp34pXF3h5QaXPAk8LIzQr',
        SecretKey: 'Kc0DmBXhpw56ua6OULTTGpCexG8qIUgk'
      })
      // 小文件上传，小于2kb
      cos.putObject({
        Bucket: 'hm-rz-94-1324721122',
        Region: 'ap-guangzhou',
        Key: e.file.name,
        StorageClass: 'STANDARD',
        Body: e.file
      }
      , (err, data) => {
        if (err) {
          console.log('err  --->', err)
          return
        }
        this.$emit('input', 'https://' + data.Location)
      }
      )

      /*  大文件上传
      cos.uploadFile({
        Bucket: 'hm-rz-94-1324721122', /* 填入您自己的存储桶，必须字段
        Region: 'ap-guangzhou', /* 存储桶所在地域，例如ap-beijing，必须字段
        Key: e.file.name, /* 存储在桶里的对象键（例如1.jpg，a/b/test.txt），必须字段
        Body: e.file, /* 必须，上传文件对象，可以是input[type="file"]标签选择本地文件后得到的file对象
        SliceSize: 1024 * 1024 * 5, /* 触发分块上传的阈值，超过5MB使用分块上传，非必须
        onTaskReady: function(taskId) { 非必须
          console.log(taskId)
        },
        onProgress: function(progressData) {  非必须
          console.log(JSON.stringify(progressData))
        },
        onFileFinish: function(err, data, options) { 非必须
          console.log(options.Key + '上传' + (err ? '失败' : '完成'))
        },
        // 支持自定义headers 非必须
        Headers: {
          'x-cos-meta-test': 123
        }
      }, function(err, data) {
        console.log(err || data)
      }) */
    },
    beforeAvatarUpload(file) {
      const fileType = ['image/jpeg', 'image/gif', 'image/png', 'image/bmp']
      const isJPG = fileType.includes(file.type)
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
        return false
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
        return false
      }
      return isJPG && isLt2M
      //  return true 不管多大文件都能上传
    }
  }
}
</script>
